<template>
  <div>
    <el-button style="margin-bottom:15px;" size="small" type="primary" @click="addNewModel">新建模板</el-button>
    <el-table width="100%" border :data="modulesList">
      <el-table-column type="index" label="序号" width="50px" />
      <el-table-column label="模板名称" prop="name" />
      <el-table-column label="类型" prop="sys" :formatter="typeHandle" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="watch(scope)">查看字段</el-button>
          <el-button type="primary" size="small" @click="addNewField(scope)">添加字段</el-button>
          <el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
          <el-button type="danger" size="small" :disabled="scope.row.sys ===0" @click="deleteTmp(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑/新建分组 -->
    <el-dialog :visible.sync="modelFlag" :title="modelTitle">
      <el-form ref="modleForm" :model="modelInfo" :rules="modelRules" size="small" label-width="80px">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="modelInfo.name" placeholder="请输入模板名称" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelHandle('modleForm')">取消</el-button>
        <el-button type="primary" @click="sureHandle('modleForm')">确定</el-button>
      </div>
    </el-dialog>
    <!-- 查看字段 -->
    <el-dialog :visible.sync="watchFlag" title="查看字段" top="5vh">
      <el-button style="margin:10px 0 10px 0;" type="primary" size="small" @click="addNewField">添加新字段</el-button>
      <el-button type="primary" size="small" @click="getFieldList">刷新</el-button>
      <el-table border :data="fieldsLsit">
        <el-table-column type="index" label="序号" width="50px" />
        <el-table-column prop="desc" label="字段名称" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editField(scope)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteFiled(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 字段添加编辑 -->
    <el-dialog :visible.sync="handleFlag" :title="fieldType">
      <el-form ref="fieldForm" :model="fieldInfo" :rules="fieldRules" size="small" label-width="80px">
        <el-form-item label="字段编码" prop="field">
          <el-input v-model="fieldInfo.field" placeholder="请输入字段编码" />
        </el-form-item>
        <el-form-item label="字段名称" prop="desc">
          <el-input v-model="fieldInfo.desc" placeholder="请输入字段名称" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelHandleField('fieldForm')">取消</el-button>
        <el-button type="primary" @click="sureHandleField('fieldForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { MODEL_API } from '@/api/index'
export default {
  data() {
    return {
      modulesList: [],
      fieldsLsit: [],
      modelFlag: false,
      handleFlag: false,
      watchFlag: false,
      modelInfo: {
        name: ''
      },
      modelRules: {
        name: [{ required: true, message: '请填写模板名称', trigger: 'blur' }]
      },
      fieldInfo: {
        modelId: '',
        field: '',
        desc: ''
      },
      fieldRules: {
        field: [{ required: true, message: '请填写字段英文编码', trigger: 'blur' }],
        desc: [{ required: true, message: '请填写字段名称', trigger: 'blur' }]
      },
      modelType: 0, // 模板操作类型
      filedType: 0 // 字段操作类
    }
  },
  computed: {
    modelTitle() {
      if (this.modelType === 0) {
        return '新建模板'
      } else {
        return '编辑模板'
      }
    },
    fieldType() {
      if (this.filedType === 0) {
        return '添加字段'
      } else {
        return '编辑字段'
      }
    }
  },
  mounted() {
    this.getModelList()
  },
  methods: {
    //   类型转换
    typeHandle(row, column, cellValue, index) {
      if (cellValue === 0) {
        return '系统'
      } else {
        return '自定义'
      }
    },
    getModelList() { // 获取模板列表
      MODEL_API.modelList().then(res => {
        this.modulesList = res.data
      })
    },
    getFieldList() { // 获取模板下字段
      MODEL_API.modelProperties(this.modelInfo.id).then(res => {
        this.fieldsLsit = res.data
      })
    },
    watch(scope) { // 查看模板下字段
      this.modelInfo = scope.row
      this.fieldInfo.modelId = scope.row.id
      MODEL_API.modelProperties(scope.row.id).then(res => {
        this.fieldsLsit = res.data
        this.watchFlag = true
      })
    },
    addNewModel() { // 新增字段模板
      this.modelType = 0
      this.modelInfo = { name: '', available: 1 }
      this.modelFlag = true
    },
    edit(scope) { // 编辑字段模板
      this.modelInfo = scope.row
      this.modelType = 1
      this.modelFlag = true
    },
    deleteTmp(scope) { // 删除字段模板
      this.$confirm('您确定要删除此模板吗', '系统提示').then(() => {
        const info = scope.row
        info.available = 0
        MODEL_API.modelUpdate(info).then(() => {
          this.$message({ type: 'success', message: '删除成功', center: true })
          this.modulesList.splice(scope.$index, 1)
        })
      }).catch(() => {

      })
    },
    cancelHandle(name) { // 取消操作
      this.modelFlag = false
    },
    sureHandle(name) { // 确定添加或者编辑模板
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.modelType === 0) {
            MODEL_API.modelCreate(this.modelInfo).then(res => {
              this.modulesList.unshift(res.data)
              this.$message({
                message: '新建成功',
                type: 'success',
                center: true
              })
            })
          } else {
            MODEL_API.modelUpdate(this.modelInfo).then(res => {
              this.$message({
                message: '编辑成功',
                type: 'success',
                center: true
              })
            })
          }
        }
      })
      this.modelFlag = false
    },
    addNewField(scoped) { // 添加新字段
      this.fieldInfo = {
        modelId: this.modelInfo.id,
        field: '',
        desc: ''
      }
      if (scoped.row) {
        this.fieldInfo.modelId = scoped.row.id
      }
      this.filedType = 0
      this.handleFlag = true
    },
    editField(scope) { // 编辑字段
      this.filedType = 1
      this.fieldInfo = scope.row
      this.handleFlag = true
    },
    deleteFiled(scope) { // 删除字段
      const field = scope.row
      this.$confirm('您确定要删除此字段吗', '系统提示').then(() => {
        field.available = 0
        MODEL_API.modelFieldUpdate(field).then(() => {
          this.$message({ type: 'success', message: '删除成功', center: true })
          this.fieldsLsit.splice(scope.$index, 1)
        })
      }).catch(() => {

      })
    },
    cancelHandleField(name) { // 取消操作
      this.handleFlag = false
    },
    sureHandleField(name) { // 确定添加或者编辑字段
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.filedType === 0) {
            MODEL_API.modelFieldCreate(this.fieldInfo).then((res) => {
              this.$message({ type: 'success', message: '添加成功', center: true })
              this.fieldsLsit.push(res.data)
            })
          } else {
            MODEL_API.modelFieldUpdate(this.fieldInfo).then(() => {
              this.$message({ type: 'success', message: '编辑成功', center: true })
            })
          }
          this.handleFlag = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.field-box{
    display: inline-block;
    margin: 10px 20px 10px 0;
}
</style>
